<template>
  <div class="po">
    <a-row>
      <!-- 头像信息 -->
      <a-col :span="3" class="po-box" v-for="(i, index) in createProcessList" :key="index">
        <a-col :span="14">
          <div class="approval-block-po-Left">
            <div class="approval-block-po-Rela">
              <!-- 头像数量 和位置-->

              <span v-if="typeOfArray(i.approUserList) ? i.approUserList.length == 1 : false">
                <a-avatar icon="user" :size="64" :src="i.approUserList[0].avatar" />
                <a-icon
                  v-if="i.approStatus != 0"
                  :type="getApprovalStatusIcon(i.approStatus)"
                  :style="{
                    fontSize: '20px',
                    color: '#fff',
                    borderRadius: '50%',
                    background: getApprovalStatusColor(i.approStatus)
                  }"
                  class="approval-block-po-abso"
                />
              </span>
              <span v-if="typeOfArray(i.approUserList) ? i.approUserList.length == 2 : false">
                <a-avatar :size="48" icon="user" :src="i.approUserList[0].avatar" class="approval-block-po-avatar1" />
                <a-avatar :size="48" icon="user" :src="i.approUserList[1].avatar" class="approval-block-po-avatar4" />
                <a-icon
                  v-if="i.approStatus != 0"
                  :type="getApprovalStatusIcon(i.approStatus)"
                  :style="{
                    fontSize: '20px',
                    color: '#fff',
                    borderRadius: '50%',
                    right: '-18px',
                    background: getApprovalStatusColor(i.approStatus)
                  }"
                  class="approval-block-po-abso"
                />
              </span>
              <span v-if="typeOfArray(i.approUserList) ? i.approUserList.length > 2 : false">
                <a-avatar :size="32" icon="user" :src="i.approUserList[0].avatar" class="approval-block-po-avatar1" />
                <a-avatar :size="32" icon="user" :src="i.approUserList[1].avatar" class="approval-block-po-avatar2" />
                <a-avatar :size="32" icon="user" :src="i.approUserList[2].avatar" class="approval-block-po-avatar3" />
                <a-icon
                  v-if="i.approStatus != 0"
                  :type="getApprovalStatusIcon(i.approStatus)"
                  :style="{
                    fontSize: '20px',
                    color: '#fff',
                    borderRadius: '50%',
                    background: getApprovalStatusColor(i.approStatus)
                  }"
                  class="approval-block-po-abso"
                />
              </span>
            </div>
            <div class="approval-block-po-title">{{ i.nodeName }}</div>
          </div>
        </a-col>
        <a-col :span="10" class="approval-block-po-rig">
          <span v-if="i.approStatus == 0 || i.approStatus == 1">
            <span class="approval-block-po-dot" v-for="i in 5" :key="i"></span>
          </span>
          <span v-else class="approval-block-po-dot approval-block-po-back32C" v-for="i in 5" :key="i"></span>
        </a-col>
        <a-col :span="14" style="text-align: center">
          <div class="approval-block-po-name approval-block-po-white-space" v-if="typeOfArray(i.approUserList)">
            {{ i.approUserList[0].userName }}
            <span v-if="i.approUserList.length > 1">等人</span>
          </div>
          <div class="approval-block-po-name approval-block-po-white-space">
            <div v-if="i.nodeType !== 'notifier'">
              {{ index == 0 ? "发起审批" : getApprovalStatus(i.approStatus) }}
              <span v-if="i.activateType && i.activateType != '0'">({{ getApprovalType(i.activateType) }})</span>
            </div>
          </div>
        </a-col>
        <!-- 弹出框 -->
        <approvalpopup :approvalRecord="i" class="po-box-Show"></approvalpopup>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import approvalpopup from "./approvalpopup.vue";
import { getApprovalStatus, getApprovalType, getApprovalStatusIcon, getApprovalStatusColor } from "../funcs";
export default {
  components: { approvalpopup },
  data() {
    return {
      createProcessList: []
    };
  },
  props: ["approvalVal"],
  watch: {
    approvalVal: {
      handler(val, oldval) {
        if (val) {
          this.createApprovalProcess(val);
        }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    getApprovalStatus,
    getApprovalStatusIcon,
    getApprovalStatusColor,
    getApprovalType,
    createApprovalProcess(val) {
      this.createProcessList = val;
    },
    typeOfArray(arr) {
      return arr instanceof Array;
    }
  }
};
</script>

<style scoped>
.po-box {
  position: relative;
  cursor: pointer;
  max-height: 248px;
}
.po-box-Show {
  display: none;
}
.po-box:hover .po-box-Show {
  display: inline-block;
}
</style>
